'use client';

/**
 * 通用表单弹窗组件，基于 Radix Dialog 封装。
 * 用途：
 * - 统一弹窗大小、标题、描述、底部操作区
 * - 在表单场景中快速复用
 *
 * 使用示例：
 * <FormDialog
 *   open={open}
 *   onOpenChange={setOpen}
 *   title="新增用户"
 *   description="请填写用户的基本信息"
 *   footer={<DialogFooter>...</DialogFooter>}
 * >
 *   <UserForm />
 * </FormDialog>
 */

import React from 'react';
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from '@/components/ui/dialog';
import { cn } from '@/lib/utils';

const SIZE_CLASS_MAP = {
  sm: 'sm:max-w-md',
  md: 'sm:max-w-xl',
  lg: 'sm:max-w-2xl',
  xl: 'sm:max-w-3xl',
  full: 'sm:max-w-[90vw]',
};

function FormDialog({
  open,
  onOpenChange,
  title,
  description,
  size = 'md',
  className,
  children,
  footer,
  hideClose = false,
  contentProps,
}) {
  const sizeClass = SIZE_CLASS_MAP[size] ?? SIZE_CLASS_MAP.md;

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent
        className={cn('gap-6', sizeClass, className)}
        close={!hideClose}
        {...contentProps}
      >
        {(title || description) && (
          <DialogHeader>
            {title && <DialogTitle>{title}</DialogTitle>}
            {description && (
              <DialogDescription>{description}</DialogDescription>
            )}
          </DialogHeader>
        )}
        <div className="flex flex-col gap-4">{children}</div>
        {footer ? <DialogFooter>{footer}</DialogFooter> : null}
      </DialogContent>
    </Dialog>
  );
}

export { FormDialog };


